<template>
	<view class="citypicker">
		<view class="area" @click="mask()" v-if="type==1">{{ProvinceID==0 || CityName=='选择市'?placeholder:CityName}}</view>
		<view class="area" @click="mask()" v-if="type==2">{{ProvinceID==0 || CityName=='选择市'?placeholder:(ProvinceName+'/'+CityName)}}</view>
		<view class="area" @click="mask()" v-if="type==3">{{ProvinceID==0 || CityName=='选择市'?placeholder:(ProvinceName+'/'+CityName+'/'+AreaName)}}</view>
		<uni-transition :mode-class="['fade']" :styles="maskClass" :show="show" @click="onTap" ></uni-transition>
		<uni-transition :duration="200" :mode-class="modeClass" :styles="transfromClass" :show="show"  @click="onTap">
			<view class="tabbar" @touchmove.stop.prevent="" @touchmove.stop="" @click.stop=""><view class="tab" :class="index==1?'select':''" @click="Select_Tab(1)">{{ProvinceName}}</view><view class="tab" :class="index==2?'select':''" @click="Select_Tab(2)">{{CityName}}</view><view class="tab" :class="index==3?'select':''" @click="Select_Tab(3)" v-if="type==3">{{AreaName}}</view></view>
			<scroll-view class="box" :class="index==1?'':'hidden'" scroll-y="true" @touchmove.stop.prevent="" @touchmove.stop="" @click.stop="">
				<view class="line uni-icon border-b" :class="ProvinceID==item.ID?'active':''" @click="Check_Province(item)" v-for="item in ProvinceList"><text space="ensp">{{item.Name}}</text></view>
			</scroll-view>
			<scroll-view class="box" :class="index==2?'':'hidden'" scroll-y="true" @touchmove.stop.prevent="" @touchmove.stop="" @click.stop="">
				<view class="line uni-icon border-b" :class="CityID==item.ID?'active':''" @click="Check_City(item)" v-for="item in CityList"><text space="ensp">{{item.Name}}</text></view>
			</scroll-view>
			<scroll-view class="box" :class="index==3?'':'hidden'" scroll-y="true" @touchmove.stop.prevent="" @touchmove.stop="" @click.stop="">
				<view class="line uni-icon border-b" :class="AreaID==item.ID?'active':''" @click="Check_Area(item)" v-for="item in AreaList"><text space="ensp">{{item.Name}}</text></view>
			</scroll-view>
		</uni-transition>
		<input type="text" class="hidden" name="ProvinceID" :value="ProvinceID"/>
		<input type="text" class="hidden" name="CityID" :value="CityID"/>
		<input type="text" class="hidden" name="AreaID" :value="AreaID"/>
		<input type="text" class="hidden" name="ProvinceName" :value="ProvinceName"/>
		<input type="text" class="hidden" name="CityName" :value="CityName"/>
		<input type="text" class="hidden" name="AreaName" :value="AreaName"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index:1,
				show: false,
				showbar:false,
				List:[],
				ProvinceList:[],
				CityList:[],
				AreaList:[],
				ProvinceName:'选择省',
				CityName:'选择市',
				AreaName:'选择区',
				ProvinceID:0,
				CityID:0,
				AreaID:0,
				maskClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'z-index':100,
					'background-color': 'rgba(0, 0, 0, 0.4)'
				},
				modeClass: ['slide-bottom'],
				
				transfromClass: {
					'position': 'fixed',
					'bottom': 0,
					/* #ifdef H5 */
					'top': 'calc( var(--window-top) + 300rpx )',
					/* #endif */
					/* #ifdef APP-PLUS */
					'top': '300rpx',
					/* #endif */
					'left': 0,
					'right': 0,
					'z-index':101,
					'background-color': 'rgba(0, 0, 0, 0.4)'
				}
			};
		},
		props:{
			placeholder:{
				type:String,
				default:'请选择省市区'
			},
			cityname:{
				type:String,
				default:''
			},
			provinceid:{
				type:[Number,String],
				default:0
			},
			cityid:{
				type:[Number,String],
				default:0
			},
			areaid:{
				type:[Number,String],
				default:0
			},
			//几级联动（1.可以选择省市，但是只显示市  2.选择省市  3.选择省市区）
			type:{
				type:Number,
				default:3
			}
		},
		created(){
			this.ProvinceID= this.provinceid;
			this.CityID=this.cityid;
			this.AreaID=this.areaid;
			this.Find_CityData();
		},
		methods:{
			mask() {
				this.show = true;
			},
			onTap() {
				this.show = false;
			},
			Select_Tab(index){
				this.index=index;
			},
			ReverseCity(cityname){
				var CityID=0;
				var ProvinceID=0;
				this.List.forEach(item=>{
					if(item.Name==cityname){
						CityID=item.ID;
						ProvinceID=item.ParentID;
						return false;
					}
				});
				this.ProvinceID=ProvinceID;
				this.CityID=CityID;
			},
			Find_CityData(){
				var data = {};
				data.Act="Find_CityData"; 
				this.Util.ComPost(data, json=>{
					this.Util.HideLoading();
					this.List = json.Data.List;
					//通过城市名称，反解析出ProvinceID和CityID
					if(this.cityname!=""){
						this.ReverseCity(this.cityname);
					}
					this.Init_Province(0);
					if(this.ProvinceID>0){
						this.Init_City(this.ProvinceID);
					}
					if(this.CityID>0){
						this.Init_Area(this.CityID);
					}
				});
			},
			Init_Province(ParentID){
				var List=[];
				this.List.forEach(item=>{
					if(item.ParentID==ParentID)
					{
						if(item.ID==this.ProvinceID){
							this.ProvinceName=item.Name;
						}
						List.push(item);
					}
				});
				this.ProvinceList=List;
			},
			Init_City(ParentID){
				var List=[];
				this.List.forEach(item=>{
					if(item.ParentID==ParentID)
					{
						if(item.ID==this.CityID){
							this.CityName=item.Name;
						}
						List.push(item);
					}
				});
				this.CityList=List;
			},
			Init_Area(ParentID){
				var List=[];
				this.List.forEach(item=>{
					if(item.ParentID==ParentID)
					{
						if(item.ID==this.AreaID){
							this.AreaName=item.Name;
						}
						List.push(item);
					}
				});
				this.AreaList=List;
			},
			Check_Province(item){
				this.ProvinceID=item.ID;
				this.ProvinceName=item.Name;
				this.CityName="选择市";
				this.AreaName="选择区";
				this.index=2;
				this.Init_City(item.ID);
			},
			Check_City(item){
				this.CityID=item.ID;
				this.CityName=item.Name;
				this.AreaName="选择区";
				if(this.type==2 || this.type==1){
					this.show=false;
					this.$emit("change", {
						value: {ProvinceID: this.ProvinceID, ProvinceName:this.ProvinceName, CityID:this.CityID, CityName:this.CityName, AreaID:this.AreaID, AreaName:this.AreaName}
					})
				}
				if(this.type==3){
					this.index=3;
					this.Init_Area(item.ID);
				}
			},
			Check_Area(item){
				this.AreaID=item.ID;
				this.AreaName=item.Name;
				this.show=false;
				this.$emit("change", {
					value:{ProvinceID: this.ProvinceID, ProvinceName:this.ProvinceName, CityID:this.CityID, CityName:this.CityName, AreaID:this.AreaID, AreaName:this.AreaName}
				})
			}
		}
	}
</script>

<style lang="scss">
	.citypicker{width:100%;}
	.area{width:100%; text-align: left; color:$uni-tip-color; font-size:30rpx;}
	.tabbar{width:100%; min-height:80rpx; display:flex; flex-direction: row; background-color: #ffffff; padding-left:26rpx;
		.tab{width:auto; min-height:80rpx; padding-top:30rpx; margin-right:40rpx; font-size:30rpx;}
		.select{color:$uni-pink-color; border-bottom:4rpx solid $uni-pink-color;}
	}
	.box{width:100%; height: calc(100vh - var(--window-top) - 378rpx); background:#ffffff; overflow-y:hidden; z-index:99; padding:26rpx;
		.line{width:100%; height:80rpx; line-height: 80rpx; display: flex; flex-direction: row; justify-content: space-between;}
		.line:active{background-color: $uni-active-color;}
		.active{color:$uni-blue-color;}
		.active:after{content:'\e472'; font-size:36rpx;}
	}
</style>
